<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>10html폼요소</title>
	</head>
	<body>
		<h1>폼 요소</h1>
		<hr />
		<h3>text, password, botton(submit, reset)</h3>
		<form action="login.jsp" method="post" name="frm01">
			<p>
				<label for="usrid">아이디</label>
				<input type="text" name="usrid" id="usrid" />
			</p>
			<p>
				<label for="passwd">비밀번호</label>
				<input type="password" name="passwd" id="passwd" />
			</p>
			<p>
				<input type="button" value="로그인" />
				<input type="submit" value="로그인" />
				<input type="reset" value="다시입력" />
			</p>
		</form>
		
		<hr />		
		<form action="" method="post" name="frm02">
			<p>
				<label for="id">아이디</label>
				<input type="text" name="id" id="id" />
			</p>
			<p>
				<label for="pwd">비밀번호</label>
				<input type="password" name="pwd" id="pwd" />
			</p>
			<p>
				<label for="repwd">비밀번호 확인</label>
				<input type="password" name="repwd" id="repwd" />
			</p>
			<p>
				<label for="name">이름</label>
				<input type="text" name="name" id="name" />
			</p>
			<p>
				<input type="submit" value="입력완료" />
				<input type="reset" value="다시입력" />
			</p>
		</form>
		
		<hr />
		<h3>textarea</h3>
		<form name="frm03">
			<p>
				<label for="content">본문내용</label>
				<textarea rows="7" cols="35" name="content" id="content"></textarea>
			</p>
		</form>
		
		<hr />
		<h3>combobox, radio button, checkbox, file</h3>
		<form name="frm04">
			<p>
				<label for="grade">학년(콤보박스)</label>
				<select name="grade" id="grade" size="6" multiple="multiple">
					<option>학년을 선택하세요</option>
					<option value="1">1학년</option>
					<option value="2">2학년</option>
					<option value="3" selected="selected">3학년</option>
					<option value="4">4학년</option>
				</select>
			</p>
			<p>
				<label for="gender">성별(라디오버튼)</label>
				<input type="radio" name="gender" id="gender" value="m" checked="checked"/> 남자
				<input type="radio" name="gender" value="f" /> 여자
			</p>
			<p>
				<label for="hobby">취미(체크박스버튼)</label>
				<input type="checkbox" name="hobby" id="hobby" value="sports" checked="checked"/> 스포츠
				<input type="checkbox" name="hobby" id="game" value="game" /> 게임
				<input type="checkbox" name="hobby" id="fishing" value="fishing" /> 낚시
				<input type="checkbox" name="hobby" id="drive" value="drive" /> 드라이브
			</p>
			<p>
				<label for="photo">사진등록</label>
				<input type="file" name="photo" id="photo" />
			</p>
			
			<hr />
			<h3>image button, button</h3>
			<p>
				<label for="">이미지 버튼</label>
				<input type="image" src="images/icons/btn.png"/>
			</p>
			<p>
				<input type="hidden" name="userno" value="12-456" />
			</p>
			<p>
				<button type="submit">입력완료</button>
				<button>입력완료</button>
				<button type="reset">다시입력</button>
			</p>
			</form>
			
			<hr/>
			<h3>fieldset</h3>
			<form action="" method="post" name="frm05">
				<fieldset>
					<legend>세부 연락 정보</legend>
					<label for="email">이메일</label>
					<input type="email" name="email" id="email" required="required" />
					<br />
					<label for="mobile">핸드폰 번호</label>
					<input type="text" name="mobile" id="mobile" required="required" />
					<br />
					<label for="phone">집전화</label>
					<input type="text" name="phone" id="phone" required="required" />
					<br />
					<input type="submit" value="입력완료" />
				</fieldset>
			</form>
			
			<hr />
			<input type="text" name="uid" placeholder="아이디"/><br />
			<input type="password" name="pwd" placeholder="비밀번호"/><br />
			<input type="date" name="birth" placeholder="생년월일" />
			
			<!--
				form : 폼
				사용자 데이터 입력을 위한 html양식을 의미
				사용자(클라이언트)와 서버가 대화할 수 있게 도와주는 도구
				
				form
				사용자가 입력해야 할 항목의 범위를 지정. 입력한 데이터를 서버로 전송하는 역할 담당				
				action : 데이터 전송후 서버에서 처리할 페이지 이름을 지정
				method : 데이터 전송방식 지정(post/get)
				name : 폼 이름
				enctype : 전송한 데이터 인코딩 방식 지정. 첨부기능을 구현하려면 "multipart/form-data"로 설정
				
				get전송방식(기본값)
				입력 데이터를 action속성의 url끝에 추가
				단순히 서버상의 데이터를 조회할때 사용
				입력데이터 크기가 소량일때 사용
				
				post전송방식
				입력 데이터를 HTTP헤더에 추가
				전송해야 하는 데이터가 매우 크거나 민감한 데이터가
				포함되어 외부에 보이면 안되는 경우, 파일 첨부시 사용
				자료 추가, 삭제, 수정할 때 사용
				
				input
				- type="text"
					input태그를 이용해서 텍스트 정보 입력
					한 줄의 문자열을 입력
					name속성은 반드시 작성
					maxlength속성은 입력가능 문자 수 제한
					size속성은 입력 창의 크기 지정(사용X)
				
				- type="password"
					입력 문자가 *로 마스크 처리됨
					입력 문자가 화면에서 가려지지만 데이터가 안전하게 서버로 전송되는 것은 아님
					SSL을 사용해서 통신하는 것을 추천
				
				- type="radio"
					선택항목에서 하나만 선택
					value속성으로 항목을 선택하는 경우. 서버로 전송할 값을 정의
					checked속성을 이용해서 기본 선택항목을 정의
				
				- type="checkbox"
					선택항목에서 하나이상 선택
					그외 나머지는 radio와 동일
				
				- type="file"
					사용자가 파일을 업로드 가능
					파일 업로드시 method속성에는 반드시 post지정
					form의 enctype속성값에 multipart/form-data를 지정해야 함
				
				- type="submit"
					폼을 서버로 보내는데 사용
				- type="reset"
					폼에 입력된 정보를 초기화
				- type="button"
					단순한 버튼이 생성. 자바스크립트를 이용해서 다양한 이벤트를 처리하는데 사용할 수 있음								
				- type="image"
					전송버튼에 이미지 사용 src속성으로 버튼에 사용할 이미지 지정	
				
				- type="hidden"
					사용자가 볼 수 없는 폼에 값을 추가하여 서버로 전송가능
					브라우저에는 아무것도 표시 되지 않음			
				
				select태그는 목록에서 하나를 선택하게 함
				선택 가능한 목록은 option태그로 작성
				selected속성을 이용해서 기본 선택항목을 정의
				size/multiple속성을 추가하여 다중 선택이 가능한 드롭다운 버튼 작성할 수 있음
				
				폼 컨트롤에 레이블 붙이기
				폼 컨트롤에 제목을 나타내기 위해 각 컨트롤 앞에 단순 텍스트를 추가할 수도 있지만
				시각장애인들을 위해 label태그 사용
				label태그에 설명과 폼 요소를 함께 포함하거나
				label태그에 for속성을 이용해서 폼 요소를 지정
				for속성값은 폼의 id속성값과 일치해야 함 
				
				폼 요소 그룹으로 묶기
				fieldset태그로 특정 주제와 관련된 폼 컨트롤들을 그룹화할 수 있음 - 주위에 선이 생김
				legend요소는 fieldset태그의 목적을 나타내는 제목 표시
				
				폼 유효성 검증 : HTML5
				폼 컨트롤에 올바른 내용이 입력되지 않으면 사용자에게 메시지를 띄우게 됨
				required속성에 required값을 지정
				유효성 검증은 클라이언트에서 먼저 수행하고 서버에서 나중에 수행하는 것이 좋음
			-->		
	</body>
</html>
